import React, {useState, useEffect} from 'react'
import {Card, Row, Col, Button} from 'antd'
import moment from 'moment'
import {ArrowDownOutlined} from '@ant-design/icons'
import AdvancedSearchFrom from '@/components/SearchForm/advancedSearchFrom'
import CustomTable from '@/components/Table'
import page from '../page.less'
import styles from '../styles.less'
import {getDict} from '@/service/common/dict'
import {
	getCollectionFlow,
	getPaidCollectionFlow,
	getPaidAll,
	getCollectionAll,
} from '@/service/fiance/index'
import {downloadDocumentUrl} from '@/service/common/download'

const formItemLayout = {
	labelCol: {flex: '100px'},
	wrapperCol: {flex: '1'},
}
function AccountsReceivable() {
	const [action, setAction] = useState(1)

	const [list, setList] = useState([]) // 已收流水
	const [paidList, setPaidList] = useState([]) // 已付流水
	// 分页数据
	const [total, setTotal] = useState([])
	const [currentPage, setCurrentPage] = useState({current: 1})
	const [formValues, setFormValues] = useState({})
	const [params, setParams] = useState({
		current: 1,
		size: 10,
	})
	// const [paidInfo,setPaidInfo] = useState() // 已付条件
	// const [incomeInfo,setIncomeInfo] = useState() // 已收条件
	const [paidAll, setPaidAll] = useState(0) // 已付总额
	const [collectionAll, setCollectionAll] = useState(0) // 已收总额
	const [dict, setDict] = useState({
		order_finance_pay_status: [],
		order_rent_type: [],
		order_finance_pey_type: [],
		order_finance_collection_type: [],
	}) // 字典值
	// 已收流水统计
	const getCollection = (value: any) => {
		getCollectionAll(value).then((res) => {
			setPaidAll(res?.data?.refundFlowCount)
			setCollectionAll(res?.data?.receivableFlowCount)
		})
	}
	// 获取收款流水列表
	const getlist = (param: any, pages: any) => {
		const data = {...param, ...pages}
		getCollectionFlow(data).then((res: any) => {
			if (res?.data?.records) {
				setList(res?.data?.records)
				setTotal(res?.data?.total)
			}
		})
	}
	// 获取字典
	useEffect(() => {
		getlist({}, params)
		getDict(
			{
				dictKeys: [
					'order_finance_pay_status', // 支付状态
					'order_rent_type', // 订单列类型
					'order_finance_pey_type', // 付款方式
					'order_finance_collection_type', // 收款类型
				],
			},
			(res: any) => {
				setDict(res)
			},
		)
		getCollection({})
	}, [])
	// 已付流水统计
	const getPaid = (value: any) => {
		getPaidAll(value).then((res) => {
			setPaidAll(res?.data?.refundFlowCount)
			setCollectionAll(res?.data?.receivableFlowCount)
		})
	}

	// 获取已付流水列表
	const getPaidList = (param: any, pages: any) => {
		const data = {...param, ...pages}
		getPaidCollectionFlow(data).then((res: any) => {
			if (res?.data?.records) {
				setPaidList(res?.data?.records)
				setTotal(res?.data?.total)
			}
		})
	}
	// 已收查询
	const formItems: any[] = [
		{
			type: 'group',
			key: 'group1',
			groupItems: [
				{
					type: 'input',
					label: '流水编号',
					name: 'flowNo',
					key: 'flowNo',
					keys: 'id',
					title: 'name',
					placeholder: '请输入流水编号',
				},
				{
					type: 'input',
					key: 'receivableNo',
					name: 'receivableNo',
					label: '应收单编号',
					keys: 'key',
					title: 'label',
					placeholder: '请输入应收单编号',
				},
				{
					type: 'input',
					key: 'orderCarNo',
					name: 'orderCarNo',
					label: '订单编号',
					placeholder: '请输入订单编号',
				},
			],
		},
		{
			type: 'group',
			key: 'group2',
			groupItems: [
				{
					type: 'select',
					key: 'rentType',
					name: 'rentType',
					label: '订单类型',
					keys: 'dictKey',
					title: 'dictValue',
					items: dict?.order_rent_type,
				},
				{
					type: 'input',
					label: '车牌号',
					name: 'plateNo',
					key: 'plateNo',
					placeholder: '请输入车牌号',
				},
				{
					type: 'dateRange',
					key: 'commercialInsuranceStatus',
					name: 'commercialInsuranceStatus',
					label: '实收时间',
					placeholder: '实收时间范围',
				},
			],
		},
		{
			type: 'group',
			key: 'group3',
			groupItems: [
				{
					type: 'select',
					key: 'peyType',
					name: 'peyType',
					label: '支付类型',
					keys: 'dictKey',
					title: 'dictValue',
					items: dict?.order_finance_pey_type,
				},
				{
					type: 'input',
					label: '付款方名称',
					name: 'lesseeName',
					key: 'lesseeName',
					placeholder: '请输入付款方名称',
				},
				{
					type: 'select',
					key: 'collectionType',
					name: 'collectionType',
					label: '收款类型',
					keys: 'dictKey',
					title: 'dictValue',
					items: dict?.order_finance_collection_type,
				},
			],
		},
		{
			type: 'group',
			key: 'group4',
			groupItems: [
				{
					type: 'input',
					key: 'lessorName',
					name: 'lessorName',
					label: '售卖方',
				},
				{key: '1'},
				{key: '2'},
			],
		},
	]
	// 已付查询
	const paidFormItems: any[] = [
		{
			type: 'group',
			key: 'group1',
			groupItems: [
				{
					type: 'input',
					label: '流水编号',
					name: 'flowNo',
					key: 'flowNo',
					keys: 'id',
					title: 'name',
					placeholder: '请输入流水编号',
				},
				{
					type: 'input',
					key: 'refundNo',
					name: 'refundNo',
					label: '应退单编号',
					keys: 'key',
					title: 'label',
					placeholder: '请输入应退单编号',
				},
				{
					type: 'input',
					key: 'orderCarNo',
					name: 'orderCarNo',
					label: '订单编号',
					placeholder: '请输入订单编号',
				},
			],
		},
		{
			type: 'group',
			key: 'group2',
			groupItems: [
				{
					type: 'select',
					key: 'rentType',
					name: 'rentType',
					label: '订单类型',
					keys: 'dictKey',
					title: 'dictValue',
					items: dict?.order_rent_type,
				},
				{
					type: 'input',
					label: '车牌号',
					name: 'plateNo',
					key: 'plateNo',
					placeholder: '请输入车牌号',
				},
				{
					type: 'dateRange',
					key: 'commercialInsuranceStatus',
					name: 'commercialInsuranceStatus',
					label: '实付时间',
					placeholder: '实收时间范围',
				},
			],
		},
		{
			type: 'group',
			key: 'group3',
			groupItems: [
				{
					type: 'select',
					key: 'refundType',
					name: 'refundType',
					label: '付款类型',
					keys: 'dictKey',
					title: 'dictValue',
					items: dict?.order_finance_collection_type,
				},
				{
					type: 'input',
					label: '收款方名称',
					name: 'lesseeName',
					key: 'lesseeName',
					placeholder: '请输入收款方名称',
				},
				{
					type: 'input',
					key: 'lessorName',
					name: 'lessorName',
					label: '售卖方',
					placeholder: '请输入售卖方名称',
				},
			],
		},
	]
	const columns = [
		{
			title: '流水编号',
			dataIndex: 'flowNo',
			align: 'center',
			key: 'flowNo',
			width: 250,
		},
		{
			title: '订单编号',
			dataIndex: 'orderCarNo',
			align: 'center',
			key: 'orderCarNo',
			width: 300,
		},
		{
			title: '应收单编号',
			dataIndex: 'receivableNo',
			align: 'center',
			key: 'receivableNo',
			width: 250,
		},
		{
			title: '付款方名称',
			dataIndex: 'lesseeName',
			align: 'center',
			key: 'lesseeName',
			width: 100,
		},
		{
			title: '收款类型',
			dataIndex: 'collectionTypename',
			align: 'center',
			key: 'collectionTypename',
			width: 100,
		},
		{
			title: '应收金额',
			dataIndex: 'receivableAmount',
			align: 'center',
			key: 'receivableAmount',
			width: 100,
		},
		{
			title: '支付类型',
			dataIndex: 'peyTypename',
			align: 'center',
			key: 'peyTypename',
			width: 100,
		},
		{
			title: '实收金额',
			dataIndex: 'actualAmount',
			align: 'center',
			key: 'actualAmount',
			width: 100,
		},
		{
			title: '车牌号',
			dataIndex: 'plateNo',
			align: 'center',
			key: 'plateNo',
			width: 100,
		},
		{
			title: '订单类型',
			dataIndex: 'rentTypename',
			align: 'center',
			key: 'rentTypename',
			width: 100,
		},
		{
			title: '售卖方',
			dataIndex: 'lessorName',
			align: 'center',
			key: 'lessorName',
			width: 100,
		},
		{
			title: '交易流水号',
			dataIndex: 'transactionNo',
			align: 'center',
			key: 'transactionNo',
			width: 250,
		},
		{
			title: '实收时间',
			dataIndex: 'collectionTime',
			align: 'center',
			key: 'collectionTime',
			width: 250,
		},
	]
	const paidColumns = [
		{
			title: '流水编号',
			dataIndex: 'flowNo',
			align: 'center',
			key: 'flowNo',
			width: 250,
		},
		{
			title: '订单编号',
			dataIndex: 'orderCarNo',
			align: 'center',
			key: 'orderCarNo',
			width: 300,
		},
		{
			title: '应退单编号',
			dataIndex: 'refundNo',
			align: 'center',
			key: 'refundNo',
			width: 250,
		},
		{
			title: '收款方名称',
			dataIndex: 'lesseeName',
			align: 'center',
			key: 'refundNo',
			width: 100,
		},
		{
			title: '付款类型',
			dataIndex: 'refundTypename',
			align: 'center',
			key: 'refundTypename',
			width: 100,
		},
		{
			title: '已付金额',
			dataIndex: 'paidAmount',
			align: 'center',
			key: 'paidAmount',
			width: 100,
		},
		{
			title: '车牌号',
			dataIndex: 'plateNo',
			align: 'center',
			key: 'plateNo',
			width: 150,
		},
		{
			title: '订单类型',
			dataIndex: 'rentTypename',
			align: 'center',
			key: 'rentTypename',
			width: 150,
		},
		{
			title: '售卖方',
			dataIndex: 'lessorName',
			align: 'center',
			key: 'lessorName',
			width: 150,
		},
		{
			title: '交易流水号',
			dataIndex: 'transactionNo',
			align: 'center',
			key: 'transactionNo',
			width: 250,
		},
		{
			title: '实付时间',
			dataIndex: 'paidTime',
			align: 'center',
			key: 'paidTime',
			width: 250,
		},
	]

	// tab切换
	const changeTble = (info: number) => {
		setAction(info)
		const page3 = {
			current: 1,
			size: 10,
		}
		setCurrentPage({current: 1})
		if (info === 1) {
			getlist({}, page3)
			getCollection({})
		} else {
			getPaid({})
			getPaidList({}, page3)
		}
	}
	const [paidFormItem, setPaidFormItem] = useState({}) // 已收
	const [formItem, setFormItem] = useState({}) // 已付
	// 已收搜索
	const onFinish = (value: any) => {
		const info = {...value}
		// 应收开始-结束时间
		if (value?.commercialInsuranceStatus) {
			info.collectionStartTime = moment(
				value?.commercialInsuranceStatus[0],
			).format('YYYY-MM-DD HH:mm:ss')
			info.collectionEndTime = moment(
				value?.commercialInsuranceStatus[1],
			).format('YYYY-MM-DD HH:mm:ss')
		}
		// 删除多余字段
		delete info?.commercialInsuranceStatus
		// setIncomeInfo(info)
		const page2 = {
			current: 1,
			size: 10,
		}
		setPaidFormItem(info)
		getCollection(info)
		getlist(info, page2)
		setCurrentPage({current: 1})
	}
	// 已付搜索
	const onPaidFinish = (value: any) => {
		const info = {...value}
		// 应收开始-结束时间
		if (value?.commercialInsuranceStatus) {
			info.collectionStartTime = moment(
				value?.commercialInsuranceStatus[0],
			).format('YYYY-MM-DD HH:mm:ss')
			info.collectionEndTime = moment(
				value?.commercialInsuranceStatus[1],
			).format('YYYY-MM-DD HH:mm:ss')
		}
		// 删除多余字段
		delete info?.commercialInsuranceStatus
		// setPaidInfo(info)
		const pages = {
			current: 1,
			size: 10,
		}
		setFormItem(info)
		getPaid(info)
		getPaidList(info, pages)
		setCurrentPage({current: 1})
	}
	// 重置
	const onReset = () => {
		const page1 = {
			current: 1,
			size: 10,
		}
		setCurrentPage({current: 1})
		if (action === 1) {
			getlist({}, page1)
			getCollection({})
			setPaidFormItem({})
		} else {
			getPaidList({}, page1)
			getPaid({})
			setFormItem({})
		}
	}
	// 已付导出
	const paidExpoart = () => {
		downloadDocumentUrl({
			resourceId: '153',
			queryDesc: '交易流水已付列表导出,resourceId:153',
			queryParam: formItem,
		})
	}
	// 已收导出
	const incomeExpoart = () => {
		downloadDocumentUrl({
			resourceId: '152',
			queryDesc: '交易流水已收列表导出,resourceId:152',
			queryParam: paidFormItem,
		})
	}
	// 点击导出
	const exportClick = () => {
		if (action === 1) {
			incomeExpoart()
		} else {
			paidExpoart()
		}
	}
	return (
		<>
			<div className={`${page.card} ${page.page}`}>
				<div className={`${styles.statistics}`}>
					{/* 根据已收和已付的不同条件进行筛选 */}
					<Row gutter={24}>
						<Col span={3}>
							<Card
								hoverable
								className={action === 1 && styles.action}
								onClick={() => {
									setFormValues({})
									changeTble(1)
									setPaidFormItem({})
									setFormItem({})
								}}>
								<div style={{display: 'flex'}}>
									<Card.Meta
										title="已收流水"
										description={`￥${collectionAll}`}
									/>
								</div>
							</Card>
						</Col>
						<Col span={3}>
							<Card
								hoverable
								className={action === 2 && styles.action}
								onClick={() => {
									setFormValues({})
									changeTble(2)
									setPaidFormItem({})
									setFormItem({})
								}}>
								<div style={{display: 'flex'}}>
									<Card.Meta
										title="已付流水"
										description={`￥${paidAll}`}
									/>
								</div>
							</Card>
						</Col>
					</Row>
				</div>
			</div>
			<div className={`${page.card} ${page.page} searchFrom`}>
				<AdvancedSearchFrom
					values={formValues}
					formLayout={formItemLayout}
					onFinish={action === 1 ? onFinish : onPaidFinish}
					onReset={onReset}
					formItems={action === 1 ? formItems : paidFormItems}
					rows={3}
				/>
				<div className={page.list}>
					<Button
						icon={<ArrowDownOutlined />}
						style={{color: '#9A59FF', borderColor: '#9A59FF'}}
						ghost
						size="small"
						onClick={exportClick}>
						导出
					</Button>
					<CustomTable
						pagination
						total={total}
						params={currentPage}
						callback={(param: any) => {
							const data = {
								current: param?.current,
							}
							if (action === 1) {
								getlist(paidFormItem, param)
							} else {
								getPaidList(formItem, param)
							}
							setParams(param)
							setCurrentPage(data)
						}}
						columns={action === 1 ? columns : paidColumns}
						dataSource={action === 1 ? list : paidList}
					/>
				</div>
			</div>
		</>
	)
}

export default AccountsReceivable
